<template>
  <div class="edit-form edit-dialog">
    <el-form ref="ruleFormRef" :model="form">
      <el-descriptions
        :column="2"
        border
        :colon="true"
        label-class-name="custom-description-label-160"
        v-for="(item, index) in form.formArray"
        :key="index"
      >
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            名称
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.name'"
            :rules="$formRules.input"
          >
            <el-input
              v-model="item.name"
              autocomplete="off"
              placeholder="请输入名称"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            编码
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.code'"
            :rules="$formRules.input"
          >
            <el-input
              v-model="item.code"
              autocomplete="off"
              placeholder="请输入编码"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            状态
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.status'"
            :rules="$formRules.select"
          >
            <pubDictSelect
              style="width: 100%"
              v-model="item.status"
              dict-code="ZDZT"
              placeholder="请选择"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            类别
          </template>
          <el-form-item
            :prop="'formArray.' + index + '.type'"
            :rules="$formRules.select"
          >
            <pubDictSelect
              style="width: 100%"
              v-model="item.type"
              dict-code="ZDLX"
              placeholder="请选择"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item v-if="form.formArray.length > 1">
          <template #label>操作</template>
          <div>
            <el-icon
              style="vertical-align: middle; margin-left: 15px; cursor: pointer"
              :size="20"
            >
              <Minus @click="delDict(index)" />
            </el-icon>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div class="options">
        <el-icon
          style="vertical-align: middle; margin-left: 15px; cursor: pointer"
          :size="20"
        >
          <Plus @click="addDict" />
        </el-icon>
      </div>
    </el-form>
    <div class="btn-group">
      <el-button class="btn-form-close" @click="cancel">取消</el-button>
      <el-button
        class="btn-form-save"
        type="primary"
        @click="submitForm(ruleFormRef)"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { addPidDict, addPidChildrenDict } from '@/api/system.js'
import { ref, reactive, onMounted } from 'vue'
const emit = defineEmits(['cancel'])
const props = defineProps({
  idAddChild: {
    type: Boolean,
    default: false
  },
  currentPid: {
    type: String,
    default: ''
  },
  parentType: {
    type: String,
    default: '1'
  }
})
const form = reactive({
  formArray: [
    {
      name: '',
      code: '',
      status: '1',
      type: '',
      sort: ''
    }
  ]
})
onMounted(() => {
  if (props.idAddChild) {
    form.formArray = [
      {
        name: '',
        code: '',
        status: '1',
        type: props.parentType,
        sort: '',
        pid: props.currentPid
      }
    ]
  }
})
const ruleFormRef = ref()
const addDict = () => {
  if (props.idAddChild) {
    form.formArray.push({
      name: '',
      code: '',
      status: '1',
      type: props.parentType,
      sort: '',
      pid: props.currentPid
    })
  } else {
    form.formArray.push({
      name: '',
      code: '',
      status: '1',
      type: '',
      sort: ''
    })
  }
}
const delDict = index => {
  form.formArray.splice(index, 1)
}
const cancel = () => {
  emit('cancel', false)
}

const submitForm = formEl => {
  console.log('formEl', formEl)
  console.log('form', form.formArray)

  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      if (props.idAddChild) {
        // 添加子字典
        const res = await addPidChildrenDict(form.formArray)
        if (res.succeed) {
          ElMessage({
            type: 'success',
            message: '新增成功'
          })
        }
      } else {
        // 添加父字典
        const res = await addPidDict(form.formArray)
        if (res.succeed) {
          ElMessage({
            type: 'success',
            message: '新增成功'
          })
        }
      }
      emit('cancel', false)
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>

<style scoped>
.el-row {
  height: 28px;
  align-items: center;
  margin-bottom: 15px;
}
.el-col {
  height: 28px;
}

.form-item-btn-group :deep(.el-form-item__content) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.options {
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-top: 10px;
}
</style>
